<template>
  <div class="RegisterMessage">
    <van-nav-bar title="基本信息"/>
    <!--    头像-->
    <div class="userImg">
      <span>头像</span>
      <van-image round
                 width="5rem"
                 height="5rem"
                 :src="registerMessage.img"
                 :after-read="afterRead"/>
    </div>
    <!--    真实姓名-->
    <van-field v-model="registerMessage.name"
               label="真实姓名"
               placeholder="请输入真实姓名"
               input-align="right"/>
    <!--性别-->
    <van-field name="radio"
               label="性别"
               input-align="right">
      <template #input>
        <van-radio-group v-model="registerMessage.sex"
                         direction="horizontal">
          <van-radio name="1">男</van-radio>
          <van-radio name="0">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <!--    出生年月日-->
    <van-field readonly
               clickable
               name="calendar"
               :value="registerMessage.birth"
               label="出生年月日"
               placeholder="请选择 >"
               @click="showBirthCalendar = true"
               input-align="right"/>
    <van-calendar v-model="showBirthCalendar"
                  :min-date="minDate"
                  @confirm="confirmBirthBtn"/>
    <!--    初次发病日期-->
    <van-field readonly
               clickable
               name="calendar"
               :value="registerMessage.morbidity"
               label="初次发病日期"
               placeholder="请选择 >"
               @click="showOnsetCalendar = true"
               input-align="right"/>
    <van-calendar v-model="showOnsetCalendar"
                  :min-date="minDate"
                  @confirm="confirmOnsetBtn"/>
    <!--    现居地址-->
    <van-field readonly
               clickable
               name="area"
               :value="registerMessage.address"
               label="地区选择"
               placeholder="请选择 >"
               @click="showArea = true"
               input-align="right"/>
    <van-popup v-model="showArea"
               position="bottom">
      <van-area :area-list="areaList"
                @confirm="confirmAddress"
                @cancel="showArea = false"/>
    </van-popup>
    <!--    确诊医院-->
    <van-field v-model="registerMessage.hospital"
               label="确诊医院"
               placeholder="请输入确诊医院"
               input-align="right"/>
    <!--    确诊时间-->
    <van-field readonly
               clickable
               name="calendar"
               :value="registerMessage.diagnosis"
               label="初次发病日期"
               placeholder="请选择 >"
               @click="showOnsetConfirmCalendar = true"
               input-align="right"/>
    <van-calendar v-model="showOnsetConfirmCalendar"
                  :min-date="minDate"
                  @confirm="confirmOnsetTimeBtn"/>
    <van-button round
                block
                type="info"
                class="finishMessageBtn"
                @click="finishMessageBtn">完成
    </van-button>
  </div>
</template>

<script>
import {areaList} from '@vant/area-data';
import {Toast} from "vant";

export default {
  name: "RegisterMessage",
  data() {
    return {
      minDate: new Date(1930, 0, 1),
      showArea: false,
      areaList, // 地址
      showBirthCalendar: false,//出生日期选择框
      showOnsetCalendar: false,//初次发病日期选择框
      showOnsetConfirmCalendar: false,//确诊时间
      registerMessage: {
        img: '',
        name: '',
        sex: '1',
        hospital: '',
        address: '',
        birth: '',
        morbidity: '',//初次发病日期
        diagnosis: ''//确诊时间
      }
    }
  },
  mounted() {
  },
  methods: {
    //完成按钮
    finishMessageBtn() {
      this.$service.registerService.userDetails(this.registerMessage).then(res => {
        if (res.data.code == 200) {
          Toast.success('信息填写成功');
          this.$router.push('/')
        }
      })
    },
    //头像
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    //确诊时间
    confirmOnsetTimeBtn(date) {
      this.registerMessage.diagnosis = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      this.showOnsetConfirmCalendar = false;
    },
    //初日发病日期
    confirmOnsetBtn(date) {
      this.registerMessage.morbidity = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      this.showOnsetCalendar = false;
    },
    //出生日期
    confirmBirthBtn(date) {
      this.registerMessage.birth = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      this.showBirthCalendar = false;
    },
    //居住地址确认按钮
    confirmAddress(values) {
      this.registerMessage.address = values
          .filter((item) => !!item)
          .map((item) => item.name)
          .join('/');
      this.showArea = false;
    },
  }
}
</script>

<style scoped lang="less">
.RegisterMessage{
  background-color: white;
}
.userImg {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 14px;
  }
}

.finishMessageBtn {
  width: 50%;
  margin: 20px auto;
}
</style>
